<template>
	<view class="page">
		<view style="height:30upx"></view>
		<view class="select-bit" @click="selectBit">
			<view class="value">{{currentCoin.coin_name || '--'}}</view>
			<view class="icon">
				<text class="placeholder">{{i18n.selectCurrency}}</text>
				<text class="iconfont">&#xe600;</text>
			</view>
		</view>
		<view class="type" v-if="currentCoin && currentCoin.coin_name && currentCoin.coin_name.toLocaleLowerCase() === 'usdt'">
			<view class="title">{{i18n.chainType}}</view>
			<view class="type-btn-group">
				<view :class="['type-btn', currentCoin.id === 3 ? 'active': '']" @click="toggleUsdtType(3)">OMNI</view>
				<view :class="['type-btn', currentCoin.id === 4 ? 'active': '']" style="margin-left: 20upx" @click="toggleUsdtType(4)">ERC20</view>
			</view>
		</view>
		<view class="address">
			<block v-if="address">
				<view class="code-container">
					<image class="code" :src="codeImg" mode="aspectFit"></image>
				</view>
				<view class="save-btn" @click="saveImg">{{i18n.save}}</view>
				<view class="title">{{i18n.address}}</view>
				<view class="address-str">{{ address }}</view>
				<view class="copy" @click="$copy(address)">
					<text class="iconfont">&#xe607;</text>
					<text style="margin-left: 10upx">{{i18n.copyAddress}}</text>
				</view>
			</block>
		</view>
		<view class="description">{{i18n.tipsOne}}</view>
		<view class="description">{{i18n.minNum}} {{ currentCoin.min_recharge_amount }}，{{i18n.unable}}</view>
		<view></view>
		<u-popup v-model="selectCurrencyModalRef" mode="bottom" border-radius="10">
			<view class="modal-body">
				<scroll-view class="scroll-list" scroll-y="true" scroll-left="120">
					<view class="item" @click="selectCoin(item)" v-for="(item, index) in data" :key="index" v-if="item.is_recharge">
						<view class="list-left">
							<CacheImage :src="item.image" class="btc-icon" mode="aspectFill"></CacheImage>
							<view class="list-center">
								<view class="name">{{item.coin_name}}</view>
							</view>
						</view>
						<text class="iconfont select-icon">&#xe600;</text>
					</view>
				</scroll-view>
			</view>
	    </u-popup>		
	</view>
</template>

<script>
	import QR from '@/utils/wxqrcode.js'
	import saveImg from '@/utils/saveImg.js'
	import CacheImage from '@/components/CacheImage.vue'
	export default {
		components: {
			CacheImage
		},
		data() {
			return {
				usdtType: 3,
				currentCoin: {},
				codeImg: '',
				address: '',
				data: [], //所有币种
				navigateType: '',
				selectCurrencyModalRef:false
			};
		},
		onShow(){
			uni.setNavigationBarTitle({
			 title: this.$t('recharge.topUp')
			})
		},
		onLoad(option) {
			this.navigateType = option.type
			this.fetchCoin();
		},
		computed: {
			i18n() {
				return this.$t('recharge')
			}
		},
		methods: {
			toggleUsdtType(type){
				this.currentCoin.id = type
				this.fetchWalletAddress()
			},
			saveImg() {
				let s = new saveImg();
				s.run({
					callback: () => {
					}
				});
			},
			selectBit() {
				this.selectCurrencyModalRef = true
			},
			fetchWalletAddress() {
				let data = this.currentCoin
				this.$post('api/funds/singleWalletAddress', {coin_id: data.id}).then(res=>{
					if(res.code === 200){
						this.address = res.data
						this.codeImg = QR.createQrCodeImg(this.address, {
							size: parseInt(350)
						});
					}
				}).catch(res =>{
					if(res.code == 400){
						this.address = ''
					}
				})
			},
			selectCoin(item) {
				this.currentCoin = item
				this.selectCurrencyModalRef = false
				this.address = ''
				this.fetchWalletAddress()
			},
			fetchCoin() {
				this.$post('api/funds/coin', {}, {
					store: 1,
					getStore: (res)=>{
						this.data = res
					}
				}).then(res=>{
					if(res.code === 200){
						this.data = res.data
						for(let i=0;i<res.data.length;i++){
							if(res.data[i].is_recharge){
								this.currentCoin = res.data[i]
								this.selectCoin(res.data[i])
								break
							}
						}
					}
				})
			},
		}
	};
</script>

<style scoped lang="less">
	.type {
		padding:20upx 0;
		margin-top: 20upx;
		.title {
			font-size: 32upx;
			font-weight: bold;
		}
		.type-btn-group {
			display: flex;
			align-items: center;
			margin-top: 20upx;
		}
		.type-btn {
			width: 140upx;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			border: 1upx solid var(--border);
			border-radius: 10upx;
			color: var(--txt-color);
		}
		.type-btn.active {
			border-color:var(--theme-color);
			color: var(--theme-color);
		}
	}
	.code-container {
		padding: 10upx;
		border-radius: 10upx;
		background-color: #fff;
		width: 250upx;
		height: 250upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-list {
		height: 600upx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 30upx;
			margin-right: 30upx;
			border-bottom: 1upx solid var(--border);
			height: 120upx;

			.select-icon {
				font-size: 24upx;
			}

			.list-left {
				display: flex;
				align-items: center;
			}

			.list-center {
				margin-left: 30upx;

				.name {
					font-size: 28upx;
					font-weight: 400;
				}
			}
		}
	}

	.btc-icon {
		width: 60upx;
		height: 60upx;
	}

	.modal-body {

	}

	.description {
		font-weight: 400;
		font-size: 24upx;
		color: var(--txt-color);
		margin-top: 20upx;
	}

	.address {
		height: 720upx;
		background: var(--block-color);
		border-radius: 10upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.copy {
			color: var(--theme-color);
			font-weight: 400;
			font-size: 24upx;
			margin-top: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.address-str {
			width: 60%;
			word-break: break-all;
			text-align: center;
			margin-top: 20upx;
			line-height: 40upx;
			font-size: 28upx;
			color: var(--theme-color);
		}

		.title {
			font-size: 24upx;
			margin-top: 60upx;
		}

		.code {
			width: 240upx;
			height: 240upx;
		}

		.save-btn {
			min-width: 240upx;
			height: 60upx;
			border: 1px solid var(--theme-color);
			border-radius: 6upx;
			font-size: 24upx;
			font-weight: 400;
			color: var(--theme-color);
			line-height: 60upx;
			text-align: center;
			margin-top: 40upx;
		}
	}

	.select-bit {
		height: 100upx;
		border: 1upx solid var(--border);
		border-radius: 10upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		justify-content: space-between;

		.value {
			font-size: 30upx;
			font-weight: bold;
		}

		.icon {
			display: flex;
			align-items: center;
			color: var(--txt-color);
			font-size: 26upx;
		}

		.placeholder {
			margin-right: 20upx;
		}
	}

	.page {
		padding-left: 30upx;
		padding-right: 30upx;
	}
</style>
